<template>
  <el-divider style="width: 100%"
    ><span style="font-size: 23px; font-family: '楷体'">成绩管理</span></el-divider
  >
  <el-form style="margin-left: 80%">
    <el-form-item>
      <el-button type="primary" @click="exportScoreInfo"
        ><el-icon style="margin-right: 5px" size="18px"><Upload /></el-icon>导出人员综合成绩表
      </el-button>
    </el-form-item>
  </el-form>
  <!--  搜索-->
  <el-form :inline="true" :model="searchScore" style="margin-top: -20px">
    <el-form-item label="学号">
      <el-input
        v-model="searchScore.studentId"
        type="text"
        placeholder="输入学号"
        clearable
        style="width: 130px"
      />
    </el-form-item>
    <el-form-item label="姓名">
      <el-input
        v-model="searchScore.stuName"
        type="text"
        placeholder="输入姓名"
        clearable
        style="width: 100px"
      />
    </el-form-item>
    <el-form-item label="卓越班班级">
      <el-select
        v-model="searchScore.className"
        placeholder="选择卓越班名称"
        style="width: 200px"
        clearable
      >
        <el-option v-for="item in classNameList" :label="item.value" :value="item.value" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">搜索</el-button>
      <el-button type="info" @click="resetForm">清空</el-button>
    </el-form-item>
  </el-form>

  <!--  表单-->
  <el-table :data="scoreInfoData" style="width: 100%" border @sort-change="sortByStuGrade">
    <el-table-column type="index" label="序号" width="60" align="center" />
    <el-table-column prop="studentId" label="学号" width="140" align="center" />
    <el-table-column prop="stuName" label="姓名" width="100" align="center" />
    <el-table-column prop="stuSpeciality" label="专业" width="200" align="center" />
    <el-table-column prop="stuClass" label="班级" align="center" />
    <el-table-column prop="stuGrade" label="年级" width="100" align="center" sortable="custom" />
    <el-table-column prop="className" label="卓越班班级" width="180" align="center" />
    <el-table-column prop="examScore" label="考试分数" width="110" sortable align="center">
      <template v-slot="row">
        <span v-if="row.row.examScore != '' && row.row.examScore != null">{{
          row.row.examScore
        }}</span>
        <span v-else>无</span>
      </template>
    </el-table-column>
    <el-table-column prop="intvScore" label="面试分数" width="110" sortable align="center">
      <template v-slot="row">
        <span>{{ row.row.intvScore }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="200" align="center">
      <template v-slot="{ row }">
        <el-button type="primary" @click="goDetail(row)">详情</el-button>
        <el-button type="warning" @click="setScore(row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!--  分页-->
  <br />
  <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="[10, 20, 30, 40, 50]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    background
    @size-change="SizeChange"
    @current-change="CurrentChange"
  />

  <!--  详情对话框-->
  <el-dialog
    v-model="dialogDetailVisible"
    align-center
    center
    title="学生详细信息"
    width="50%"
    style="height: 700px; background-color: #d1edc4"
  >
    <div class="info-box">
      <div class="item-box">
        <el-image
          v-if="diaForm.stuImage"
          style="width: 100px;display: block; float: left"
          :src="diaForm.stuImage"
        />
        <div
          v-else
          style="
          width: 100px;height: 150px;display: flex; float: left;
          background-color: #fff;align-items: center;justify-content: center;">
          无照片
        </div>
        <span class="label">姓名：</span>
        <span class="des">{{ diaForm.stuName }}</span>

        <span class="label">性别：</span>
        <span class="des">{{ diaForm.stuSex }}</span>

        <span class="label">学号：</span>
        <span class="des">{{ diaForm.studentId }}</span>

        <span class="label">电话：</span>
        <span class="des">{{ diaForm.stuPhone }}</span>

        <br />
        <span class="label">学院：</span>
        <span class="des">{{ diaForm.stuDepartment }}</span>

        <span class="label">专业：</span>
        <span class="des">{{ diaForm.stuSpeciality }}</span>

        <span class="label">年级：</span>
        <span class="des">{{ diaForm.stuGrade }}</span>

        <br />
        <span class="label">班级：</span>
        <span class="des">{{ diaForm.stuClass }}</span>

        <span class="label">邮箱：</span>
        <span class="des">{{ diaForm.email }}</span>

        <br />
        <span class="label">竞赛信息：</span>
        <div
          v-if="diaForm.contest != null && diaForm.contest != ''"
          style="color: #333333; margin-left: 80px"
          v-for="(item, index) in diaForm.contest"
          :key="index"
        >
          <div>
            奖项{{ index + 1 }}：{{
              item.conName + '&nbsp;&nbsp;&nbsp;&nbsp;获奖时间：' + item.conTime
            }}<br />
          </div>
        </div>
        <span v-else>无<br /></span>

        <span class="label">个人技能：</span>
        <span class="des">{{ diaForm.stuSkill + '，' + diaForm.stuSkillStack }}</span>

        <br />
        <span class="label">个人意向：</span>
        <span class="des">{{ diaForm.stuIntention }}</span>
      </div>
    </div>
  </el-dialog>

  <!--  编辑对话框-->
  <el-dialog v-model="dialogScoreVisible" align-center center title="考试成绩编辑" width="30%">
    <el-form ref="scoreFormRef" :model="scoreInfo" label-width="100px">
      <el-form-item
        label="考试分数"
        prop="examScore"
        :rules="[{ type: 'number', message: '分数必须是一个数字' }]"
      >
        <el-input v-model.number="scoreInfo.examScore" type="text" autocomplete="off" />
      </el-form-item>
      <el-form-item
        label="面试分数"
        prop="intvScore"
        :rules="[{ type: 'number', message: '分数必须是一个数字' }]"
      >
        <el-input v-model.number="scoreInfo.intvScore" type="text" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span>
        <el-button @click="dialogScoreVisible = false">取消</el-button>
        <el-button type="primary" @click="submitScore(scoreFormRef)">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { ElMessage, FormInstance } from 'element-plus'
import { ExportScoreInfo, getScoreInfo, updateScore } from '@/apis/score'
import { getAllClassNameService } from '@/apis/dataCount'

const currentPage = ref(1)
const pageSize = ref(5)
const total = ref(30)
const dialogDetailVisible = ref(false)
const dialogScoreVisible = ref(false)
const diaForm = ref({})
const scoreFormRef = ref<FormInstance>()
const classNameList = ref([])
const sortByStuGrade = (k: any) => {
  for (let i = 0; i < scoreInfoData.value.length; i++) {
    if (scoreInfoData.value[i].stuGrade === '大一') scoreInfoData.value[i].gradeKey = 1
    if (scoreInfoData.value[i].stuGrade === '大二') scoreInfoData.value[i].gradeKey = 2
    if (scoreInfoData.value[i].stuGrade === '大三') scoreInfoData.value[i].gradeKey = 3
    if (scoreInfoData.value[i].stuGrade === '大四') scoreInfoData.value[i].gradeKey = 4
  }
  if (k.order === 'ascending') {
    scoreInfoData.value.sort((a, b) => (a.gradeKey > b.gradeKey ? 1 : -1))
  }
  if (k.order === 'descending') {
    scoreInfoData.value.sort((a, b) => (a.gradeKey > b.gradeKey ? -1 : 1))
  }
}
const scoreInfo = ref({
  studentId: '',
  intvId: '',
  intvScore: '',
  examId: '',
  examScore: ''
})

const searchScore = ref({
  studentId: '',
  stuName: '',
  className: ''
})
const scoreInfoData = ref([])

onMounted(() => {
  getAllClassNameService().then((res) => {
    if (res.data.code === 1) {
      let className = res.data.data
      for (let v of className) {
        classNameList.value.push({ value: v })
      }
    } else {
      ElMessage({ type: 'error', message: res.data.msg })
    }
  })
  page()
})
const page = () => {
  getScoreInfo(
    currentPage.value,
    pageSize.value,
    searchScore.value.studentId,
    searchScore.value.stuName,
    searchScore.value.className
  ).then((res) => {
    if (res.data.code === 1) {
      scoreInfoData.value = res.data.data.rows
      total.value = res.data.data.total
    } else {
      ElMessage({ type: 'error', message: res.data.msg })
    }
  })
}
const submitForm = () => {
  currentPage.value = 1
  page()
}
const resetForm = () => {
  searchScore.value = {
    studentId: '',
    stuName: '',
    className: ''
  }
  page()
}

const SizeChange = (val: number) => {
  pageSize.value = val
  page()
}
const CurrentChange = (val: number) => {
  currentPage.value = val
  page()
}

const goDetail = (row: any) => {
  diaForm.value = {}
  dialogDetailVisible.value = true
  diaForm.value = { ...row }
}

const exportScoreInfo = async () => {
  if (searchScore.value.className === '') {
    ElMessage({ type: 'error', message: '请选择导出哪一届卓越班学生综合成绩信息' })
    return
  }
  const { data } = await ExportScoreInfo(searchScore.value.className)
  let url = window.URL.createObjectURL(data)
  var a = document.createElement('a')
  document.body.appendChild(a)
  a.href = url
  a.download = '人员成绩综合信息表.xlsx'
  a.click()
  window.URL.revokeObjectURL(url)
}
const setScore = (row: any) => {
  dialogScoreVisible.value = true
  scoreInfo.value.studentId = { ...row }.studentId
  scoreInfo.value.examScore = { ...row }.examScore
  scoreInfo.value.intvScore = { ...row }.intvScore
  scoreInfo.value.intvId = { ...row }.intvId
  scoreInfo.value.examId = { ...row }.examId
}
const submitScore = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      if (scoreInfo.value.examScore > 100 || scoreInfo.value.intvScore > 100) {
        ElMessage({ type: 'error', message: '分数不超过100' })
        return false
      }
      updateScore(scoreInfo.value).then((res) => {
        if (res.data.code === 1) {
          scoreInfo.value = {
            intvId: '',
            intvScore: '',
            examId: '',
            examScore: ''
          }
          dialogScoreVisible.value = false
          ElMessage({ type: 'success', message: '保存成功' })
          page()
        } else {
          ElMessage({ type: 'error', message: res.data.msg })
        }
      })
    } else {
      return false
    }
  })
}
</script>
<style>
.info-box {
  margin: -15px -10px 20px;
}
.info-box .item-box {
  height: 20px;
  line-height: 50px;
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  text-align: left;
  margin-bottom: 14px;
}
.info-box .item-box .label {
  width: 50px;
  margin-left: 40px;
}
.info-box .item-box .des {
  color: #333333;
}
</style>
